<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <el-form
            ref="mailConfigForm"
            :model="mailConfigForm"
            :rules="mailConfigRules"
            label-width="130px"
            class="demo-ruleForm"
          >
            <el-form-item :label="$t('mailTool.mailConfigForm.userName')" prop="userName">
              <el-input v-model="mailConfigForm.userName" />
            </el-form-item>
            <el-form-item :label="$t('mailTool.mailConfigForm.nickName')" prop="nickName">
              <el-input v-model="mailConfigForm.nickName" />
            </el-form-item>
            <el-form-item :label="$t('mailTool.mailConfigForm.password')" prop="password">
              <el-input v-model="mailConfigForm.password" type="password" />
            </el-form-item>
            <el-form-item :label="$t('mailTool.mailConfigForm.smtpHost')" prop="smtpHost">
              <el-input v-model="mailConfigForm.smtpHost" />
            </el-form-item>
            <el-form-item :label="$t('mailTool.mailConfigForm.smtpPort')" prop="smtpPort">
              <el-input v-model="mailConfigForm.smtpPort" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('mailConfigForm')">{{ $t('mailTool.btn.add') }}</el-button>
              <el-button @click="resetForm('mailConfigForm')">{{ $t('mailTool.btn.reset') }}</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div>
            <span>
              <b>{{ $t('mailTool.promptInfo.title') }}</b>
            </span>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info1') }}</el-divider>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info2') }}</el-divider>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info3') }}</el-divider>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info4') }}</el-divider>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info5') }}</el-divider>
            <el-divider class="Tips" content-position="left">{{ $t('mailTool.promptInfo.info6') }}</el-divider>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'ConfigMail',
  data() {
    return {
      mailConfigForm: {
        id: '',
        userName: '',
        nickName: '',
        password: '',
        smtpHost: '',
        smtpPort: ''
      },
      mailConfigRules: {
        userName: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        nickName: [
          { required: true, message: '请输入发件人名称', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入邮箱密码', trigger: 'blur' }
        ],
        smtpHost: [
          { required: true, message: 'SMTP地址不能为空', trigger: 'blur' }
        ],
        smtpPort: [
          { required: true, message: 'SMTP端口不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getMailConfig()
  },
  methods: {
    getMailConfig() {
      getAction('/mail/config/getInfo')
        .then((resp) => {
          this.mailConfigForm = resp.result
        })
        .catch((resp) => {
          this.$message.error('加载失败！')
        })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          postAction('/mail/config/send', this.mailConfigForm)
            .then((resp) => {
              this.mailConfigForm = resp
              this.$message.success('配置成功！')
              this.getMailConfig()
            })
            .catch((resp) => {
              this.$message.error('配置失败！')
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
.Tips{
  margin: 40px 0px;
}
</style>
